<!--利润模板-->
<template>
  <div class="newCheckContainer newcheck">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <div class="divheight"></div>
    <!--选行政区开始-->
    <div class="areacontent">
      <van-row gutter="30">
        <van-col span="12">
          <van-dropdown-menu active-color="#0AD691">
            <van-dropdown-item
              v-model="ProjectCompany"
              :options="ProjectCompanycolumns"
              @change="onConfirmProjectCompany"
            />
          </van-dropdown-menu>
        </van-col>
      </van-row>
    </div>
    <!--选行政区结束-->
    <div class="divheight"></div>
    <!--打分开始-->
    <div class="scorecontent">
      <div class="countScoreDiv">
        <div class="countScoreTop">
          <p>
            项目公司：
            <span>{{clearnName}}</span>
          </p>
          <p>{{checkdate}}</p>
        </div>
      </div>
      <div class="countScoreHeader">考核项名称</div>
      <div>
        <van-row class="rowItem">
          <van-col :span="12">利润考核指标（万元）</van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">计划利润指标</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="profit.plan_value" class="scoerbut" />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">实际利润指标</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="profit.reality_value" class="scoerbut" />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">完成率%</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="percentage" class="scoerbut" disabled />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">系统评分</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="system_score" class="scoerbut" disabled />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">考评得分</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="check_score" class="scoerbut" disabled />
          </van-col>
        </van-row>
      </div>

      <div class="botbuttonp">
        <p class="refuse" @click="savebut">保存</p>
      </div>
    </div>
    <!--打分结束-->
    <!--加载框开始-->
    <van-overlay :show="showloading">
      <div class="wrapper">
        <div class="loadingcont">
          <van-loading size="24px" vertical>{{loaddingText}}</van-loading>
        </div>
      </div>
    </van-overlay>
    <!--加载框结束-->
  </div>
</template>
<script>
import CommonBar from "../../common/commonBar";
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      //公共bar
      options: {
        type: "icon",
        centerText: "利润考核",
        iconNname: "wap-home",
        lefttype: "left"
      },
      //项目管理部
      GroupDepartment: "1",
      GroupDepartmentcolumns: [],
      //项目公司
      ProjectCompany: 0,
      ProjectCompanycolumns: [{ text: "请选择项目公司", value: 0 }],
      selectshow: true,
      selectshow1: true,
      clearnName: "",
      checkdate: "",
      profit: { plan_value: "", reality_value: "" },
      percentage: "",
      system_score: "",
      check_score: "",
      showloading: false,
      loaddingText: "提交信息中",
      is_power: "",
      arrchenge: ""
    };
  },
  created() {
    this.initFirst();
    this.showDate();
  },
  watch: {
    profit: {
      //深度监听，可监听到对象、数组的变化
      handler(newval, oldval) {
        var percentage = newval.reality_value / newval.plan_value;
        this.percentage = Math.round(percentage * 100);
        this.system_score = this.percentage;
        this.check_score = this.system_score;
      },
      deep: true
    }
  },
  destroyed() {
    var that = this;
    document.removeEventListener("backbutton", that.backbutton, false);
  },
  mounted() {
    var that = this;
    document.addEventListener("backbutton", that.backbutton, false);
  },
  methods: {
    backbutton() {
      if (
        this.profit.plan_value.length != 0 ||
        this.profit.reality_value.length != 0 ||
        this.clearnName != 0
      ) {
        Dialog.confirm({
          title: "提示",
          message: "内容未保存，是否返回"
        })
          .then(() => {
            history.back();
          })
          .catch(() => {
            // on cancel
          });
      } else {
        history.back();
      }
    },
    initFirst() {
      var params = { token: this.token, group_department_id: 1 };
      this.$http
        .get(
          `${this.$basePath}?service=App.Organizational.ListGroupDepartment&api=84`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("项目部列表", res);
            var result = res.data.map(o => {
              return {
                text: o.name,
                value: o.id
              };
            });

            this.GroupDepartmentcolumns = result;
            var params = {
              group_department_id: 1,
              token: this.token
            };
            this.initSencond(params);
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //点击项目部列表

    /**项目公司 */
    initSencond(params) {
      this.$http
        .get(
          `${this.$basePath}?service=App.Organizational.ListProjectCompany&api=84`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("项目公司列表", res);
            var result = res.data.map(o => {
              return {
                text: o.name,
                value: o.id
              };
            });
            result.unshift({ text: "请选择项目公司", value: 0 });
            this.ProjectCompanycolumns = result;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    onConfirmProjectCompany() {
      this.clearnName = "";
      if (this.ProjectCompany != 0) {
        var params = {
          project_company_id: this.ProjectCompany,
          token: this.token
        };
        this.getClearnName(params);
      }
    },
    /**获取项目公司信息 */
    getClearnName(params) {
      this.$http
        .get(
          `${this.$basePath}?service=App.ProjectCompany.GetProjectCompany&api=86`,
          {
            params: params
          }
        )
        .then(res => {
          this.is_power = res.data.is_power;
          console.log("项目公司信息", this.is_power);
          if (res.ret == 200 && res.data.name) {
            this.clearnName = res.data.name;
            console.log("项目公司信息", res);
          } else {
            this.clearnName = "";
            this.$toast({ message: "该片区未分配项目公司" });
          }
        });
    },
    //系统日期
    showDate() {
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.checkdate = year + "-" + month;
    },
    savebut() {
      console.log("111", this.profit.plan_value);
      if (this.is_power) {
        this.showloading = true;
        var params = {
          id: 0,
          token: this.token,
          project_company_id: this.ProjectCompany,
          plan_value: this.profit.plan_value,
          reality_value: this.profit.reality_value
        };
        this.$http
          .post(
            `${this.$basePath}?service=App.ProjectCompany.UpdateProfitCheck&api=86`,
            params
          )
          .then(res => {
            if (res.ret == 200) {
              this.$toast({ message: res.msg });
              this.showloading = false;
              console.log("提交分数", res);
              //提交后清空数据
              this.$router.push({
                //核心语句
                path: "/profitList" //跳转的路径
              });
            } else {
              this.$toast({ message: res.msg });
              this.showloading = false;
            }
          });
      } else {
        this.$toast({ message: "暂未授权,不能提交信息" });
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/check";

.botbuttonp {
  width: 100%;
  padding: 15px 0;
  position: fixed;
  bottom: 0;
  .refuse {
    width: 92%;
    height: 38px;
    background: #0ad591;
    border-radius: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    outline: none;
    margin: 0 auto;
    color: #fff;
    font-size: 14px;
  }
}
.scoerbut {
  width: 100px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 2px;
  padding-left: 5px;
  outline: none;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}
.rightcol {
  text-align: right;
}
.savebut1 {
  background: #b5b5b5 !important;
}
</style>